<template>
	<view class="u-rela">
		<div class="u-font-48 blod u-p-b-20">创建公司</div>
		<div class="u-font-26 u-content-color u-m-b-20">请确保您输入的信息真实有效</div>
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="公司全称">
				<u-input v-model="form.name" placeholder="请输入公司名全称" />
			</u-form-item>
			<u-form-item label="公司标志">
				<u-upload upload-text="选择图片" ref="uUpload" max-count="1" :file-list="fileList"
					:auto-upload="false" @on-choose-complete="on_choose_complete"></u-upload>
			</u-form-item>
			<u-form-item label="公司负责人姓名">
				<view class="u-m-t-20">
					<u-input v-model="form.principal_name" />
				</view>
			</u-form-item>
			<u-form-item label="行业">
				<u-input placeholder="请选择" v-model="form.industry" type="select" @click="industryShow = true" />
				<u-action-sheet :list="industryList" :tips="industry_tips" v-model="industryShow" border-radius='30'
					:cancel-btn='false' @click="industryCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="公司规模">
				<u-input placeholder="请选择" v-model="form.scale" type="select" @click="scaleShow = true" />
				<u-action-sheet :list="scaleList" v-model="scaleShow" border-radius='30' :cancel-btn='false'
					@click="scaleCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="公司简介">
				<u-input class="textarea" v-model="form.intro" type="textarea" />
			</u-form-item>
			<u-form-item label="公司福利">
				<div class="u-input u-flex u-flex-wrap">
					<u-tag class="u-m-r-10" :text="item" type="info" closeable v-for="(item,index) in tag_list"
						:key="index" @close="tagClick(index)" />
					<!-- <u-tag class="u-m-r-10" text="年底双薪" type="info" closeable /> -->
					<div class="icon-plus-wrap" @click="handler_input_flag">
						<u-icon name="plus"></u-icon>
					</div>
				</div>
				<view class="u-m-t-20" v-if="input_flag == true">
					<u-input placeholder="请添加公司福利" v-model="form.tag" @blur='handler_blur' />
				</view>
			</u-form-item>
			<u-form-item label="公司电话">
				<view class="u-m-t-20">
					<u-input v-model="form.mobile" />
				</view>
			</u-form-item>
			<u-form-item label="省">
				<view class="u-m-t-20">
					<u-input v-model="form.province" />
				</view>
			</u-form-item>
			<u-form-item label="市">
				<view class="u-m-t-20">
					<u-input v-model="form.city" />
				</view>
			</u-form-item>
			<u-form-item label="区">
				<view class="u-m-t-20">
					<u-input v-model="form.county" />
				</view>
			</u-form-item>
			<u-form-item label="区域">
				<view class="u-m-t-20">
					<u-input v-model="form.area" />
				</view>
			</u-form-item>
			<u-form-item label="详细地址">
				<!-- <u-input placeholder="请选择" v-model="form.address" type="select" @click="addressShow = true" />
				<u-action-sheet :list="addressList" v-model="addressShow" border-radius='30' :cancel-btn='false'
					@click="addressCallback"></u-action-sheet> -->
				<view class="u-m-t-20">
					<u-input v-model="form.address" />
				</view>
			</u-form-item>
		</u-form>
		<button class="u-reset-button btn u-m-t-60" @click="toNext">下一步</button>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				fileList: [],
				logo_url: '',
				form: {
					name: '',
					intro: '',
					principal_name:'',
					mobile: '',
					address: '',
					scale: '',
					industry: '',
					tag: '',
					province: '',
					city: '',
					county: '',
					area: ''
				},
				addressShow: false,
				addressList: [{
						text: '某某是某某区某某号'
					},
					{
						text: '某某是某某区某某号11'
					},
					{
						text: '某某是某某区某某号22'
					}
				],
				scaleShow: false,
				scaleList: [
					// {
					// 	text: '10-20人'
					// },
					// {
					// 	text: '10-20人11'
					// },
					// {
					// 	text: '10-20人22'
					// }
				],
				industryShow: false,
				industryList: [
					// {
					// 	text: '农业'
					// },
					// {
					// 	text: '农业'
					// },
					// {
					// 	text: '农业'
					// }
				],
				industry_tips: {
					text: '请选择行业',
					color: '#666666',
					fontSize: 32
				},
				experienceShow: false,
				experienceList: [{
						text: '3-5年'
					},
					{
						text: '3-5年11'
					},
					{
						text: '3-5年22'
					}
				],
				tag_list: [
					'五险', '年底双薪'
				],
				input_flag: false
			}
		},
		onLoad() {
			// 行业列表
			this.get_recruit_industry();

			// 公司规模列表
			this.get_recruit_scale();
		},
		methods: {
			toNext() {
				// 创建公司信息
				this.get_recruit_editCompany()
			},

			// 点击添加福利按钮事件
			handler_input_flag() {
				this.input_flag = true;
			},

			// 添加福利输入框失去焦点事件
			handler_blur() {
				console.log('失去焦点了');

				if (this.form.tag != '') {
					this.input_flag = false
					this.tag_list.push(this.form.tag);
					this.form.tag = ''
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入公司福利',
						duration: 2000
					})
				}
			},

			// 删除tag
			tagClick(index) {
				this.tag_list.splice(index, 1)
			},

			// 点击actionSheet回调
			addressCallback(index) {
				this.form.address = this.addressList[index].text;
			},
			// 点击actionSheet回调
			scaleCallback(index) {
				this.form.scale = this.scaleList[index].text;
			},
			// 点击actionSheet回调
			industryCallback(index) {
				this.form.industry = this.industryList[index].text;
			},
			// 点击actionSheet回调
			experienceCallback(index) {
				this.form.experience = this.experienceList[index].text;
			},

			// 上传
			on_choose_complete() {
				this.upload_file()
			},
			upload_file() {
				let that = this
				let tempFilePaths = this.$refs.uUpload.lists[0].url
				uni.uploadFile({
					url: that.api.baseUrl + that.api.upload_file, //真实的接口地址
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						that.logo_url = JSON.parse(uploadFileRes.data).data.url
					}
				});
			},

			// 行业列表
			get_recruit_industry() {
				this.$http({
					url: this.api.recruit_industry,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(el => {
							this.industryList.push({
								id: el.id,
								text: el.title
							})
						})
					}
				})
			},

			// 公司规模列表
			get_recruit_scale() {
				this.$http({
					url: this.api.recruit_scale,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(el => {
							this.scaleList.push({
								text: el + '人'
							})
						})
					}
				})
			},

			// 修改公司信息
			get_recruit_editCompany() {
				this.$http({
					url: this.api.recruit_editCompany,
					method: 'POST',
					data: {
						name: this.form.name, //公司名称
						logo: this.logo_url, //公司标志
						principal_name:this.form.principal_name,//公司负责人姓名
						mobile: this.form.mobile, //电话
						industry: this.form.industry, //行业
						scale: this.form.scale, //公司规模
						content: this.form.intro, //公司介绍
						tag: this.tag_list, //公司福利
						province: this.form.province, //省
						city: this.form.city, //市
						county: this.form.county, //县
						area: this.form.area, //区域
						address: this.form.address, //详细地址
					}
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url:'/pages/recruit/worker/corCertify'
						})
					}
				})
			},
			
			// 创建公司信息
			get_recruit_addCompany(){
				this.$http({
					url:this.api.recruit_addCompany,
					method:'POST',
					data:{
						name:this.form.name, //公司名称
						logo:this.logo_url, //公司标志
						principal_name:this.form.principal_name,//公司负责人姓名
						mobile:this.form.mobile, //电话
						industry:this.form.industry, //行业
						scale:this.form.scale, //公司规模
						content:this.form.intro, //公司介绍
						tag:this.tag_list, //公司福利
						province:this.form.province, //省
						city:this.form.city, //市
						county:this.form.county, //县
						area:this.form.area, //区域
						address:this.form.address, //详细地址
					}
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url:'/pages/recruit/worker/corCertify'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 690rpx;
		height: 100rpx;
		background: #07C160;
		border-radius: 15rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .u-border-bottom:after {
		// border: 0;
	}

	/deep/ .u-form-item--left {
		margin-bottom: 0 !important;
	}

	/deep/ .u-input {
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding: 8rpx 30rpx !important;
		font-size: 28rpx;
		min-height: 88rpx;
	}

	/deep/ .u-input__input {
		min-height: 88rpx !important;
	}

	/deep/ .u-mode-light-info {
		padding: 12rpx 17rpx !important;
		border-radius: 8rpx !important;
		border: 0 !important;
		height: 66rpx !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center;
	}

	/deep/ .u-form-item {
		padding: 10rpx 0 !important;
	}

	.textarea /deep/ .u-input {
		height: 180rpx;
		background: #F3F3F3;
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding: 20rpx 30rpx !important;
	}

	.icon-plus-wrap {
		width: 100rpx;
		height: 66rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}

	.file_image {
		width: 200rpx;
		height: 200rpx;
	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F2F2F2;
		border-radius: 10rpx;

		>image {
			width: 68rpx;
			height: 68rpx;
		}
	}

	/deep/ .u-drawer-content {
		height: 50% !important;
	}

	u-tag {
		margin-bottom: 8rpx;
	}
</style>
<style>
	page {
		padding: 30rpx;
		background: #fff;
	}
</style>